<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/css/index.min.css">
	<link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/lib/font/iconfont.css">
	<link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/css/public.min.css">
</head>

<body>
	<!-- 公共头部 外部引用-->
	<div id="header"></div>
	<!-- 公共logo 外部引用-->
	<!-- 公共导航条 外部引用-->

	<!-- banner图片  外部引用-->
	<div id="banner">
		<iframe src="http://localhost/firstprojectyougou2/dist/public/m3.html" frameborder="0"></iframe>
	</div>
	<!-- 新品推荐部分 -->
	<div id="new_products">
		<!-- 新品推荐标题 -->
		<div class="command-title">
			<div class="title">新品推荐</div>
			<!--    <div class="en-title">NEW LIVING</div>-->
			<div class="tabs">
				<a href="javascript:;" class="shoe">男女鞋</a>
				<a href="javascript:;" class="active">运动</a>
			</div>
		</div>
		<!-- 新品推荐商品部分 -->
		<div class="new_products_shop">
			<!-- 显示商品部分 -->
			<div class="news_wrap">
				<ul class="shop_wrap">
					<li>
						<a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li>
						<a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe1.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/blackL-belle.png" alt="">
						<div class="title">韩版 短靴</div>
						<div class="pirce_news">￥609</div>
					</li>
					<li>
						<a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe2.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/blackL-belle.png" alt="">
						<div class="title">帅气 长靴</div>
						<div class="pirce_news">￥579</div>
					</li>
					<li>
						<a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe3.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">韩版 短靴</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li>
						<a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe4.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li>
						<a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe5.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe6.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe7.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe8.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">韩版 短靴</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe9.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">通勤斜挎包</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe10.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">性感纯凉鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li>
						<a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe11.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
				</ul>
				<span class="shop_left_button">&lt;</span>
				<span class="shop_right_button">&gt;</span>
			</div>
			<!-- 隐藏商品部分 -->
			<div class="news_wrap1">
				<ul class="shop_wrap">
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe15.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe13.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe7.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">休闲 满帮鞋</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe8.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">韩版 短靴</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe9.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">通勤斜挎包</div>
						<div class="pirce_news">￥585</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe12.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/blackL-belle.png" alt="">
						<div class="title">韩版 短靴</div>
						<div class="pirce_news">￥609</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe13.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/blackL-belle.png" alt="">
						<div class="title">帅气 长靴</div>
						<div class="pirce_news">￥579</div>
					</li>
					<li><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html">
							<img src="./img/shoe14.jpg" alt="">
						</a>
						<img class="img_basto" src="./img/basto.png" alt="">
						<div class="title">韩版 短靴</div>
						<div class="pirce_news">￥585</div>
					</li>
				</ul>
				<!-- 添加左右按钮点击事件 -->
				<span class="shop_le_button">&lt;</span>
				<span class="shop_rig_button">&gt;</span>
			</div>


		</div>
	</div>
	<!-- 今日主推大牌 -->
	<div id="today_main">
		<div class="main-title">
			<div class="title">今日主推大牌</div>
			<!--    <div class="en-title">NEW LIVING</div>-->
			<div class="tabs">
				<a href="javascript:;" class="shoe">男女鞋</a>
				<a href="javascript:;" class="active">运动</a>
			</div>
		</div>
		<div class="main_shop">
			<!-- 商品主图 -->
			<!-- 显示商品部分 -->
			<ul class="main_img">
				<li class="item1"><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html"><img src="img/today.jpg" alt=""><span></span></a></li>
				<li class="item"><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html"><img src="img/today1.jpg" alt=""><span></span></a></li>
				<li class="item2"><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html"><img src="img/today2.jpg" alt=""><span></span></a></li>
			</ul>
			<!-- 隐藏商品部分 -->
			<ul class="main_img1">
				<li class="item1"><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html"><img src="img/today3.jpg" alt=""><span></span></a></li>
				<li class="item"><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html"><img src="img/today4.jpg" alt=""><span></span></a></li>
				<li class="item2"><a href="http://localhost/firstprojectyougou2/dist/html/goodDetail.html"><img src="img/today5.jpg" alt=""><span></span></a></li>
			</ul>

			<!-- 品牌图标 -->
			<div class="shop_logo_wrap">
				<ul class="main_shop_logo">
					<li><a href="javascript:;"><img src="./img/adidas.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/adidasneo.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/adidasoriginals.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/asics.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/basto.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/blackL-bata.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/blackL-belle.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/blackL-senda.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/blackL-teenmix.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/converse.png" alt=""></a></li>
					<li><a href="javascript:;"><img src="./img/nike.png" alt=""></a></li>
				</ul>
				<span class="prev">&lt;</span>
				<span class="last">&gt;</span>
			</div>
		</div>
	</div>
	<!-- 品牌潮流资讯 -->
	<div id="Brand_Trend_Information">
		<!-- 品牌标题 -->
		<div class="icon-title">
			<div class="title">品牌潮流资讯</div>
			<div class="en-title">BRAND FASHION</div>
		</div>
		<!-- 品牌潮流主要部分 -->
		<div class="main_video">
			<div class="box">
				<img src="./img/fashion.jpg" alt="" class="left_img">
				<video controls muted>
					<source src="//i1.ygimg.cn/pics/shop/cms/advertising_video/bai_li_SS19shu_ban_30s_1080X1920~1.mp4"
						type="video/mp4">
					<!-- <source src="./img/bai_li.ogg" type="video/ogg"> -->
				</video>
			</div>
			<div class="box1">
				<img src="./img/fashion1.jpg" alt="" class="center_img">
				<video controls class="center_video" muted>
					<source src="//i1.ygimg.cn/pics/shop/cms/advertising_video/advertising_video_staccato_20190313.mp4"
						type="video/mp4">
				</video>
			</div>
			<a href="javascript:;"><img src="./img/fashion2.jpg" alt="" class="right_img" class="right_img"></a>
			<!-- <video controls>
				<source src="./img/advertising_video_basto_2021.mp4" type="video/mp4">
				<source src="./img/advertising.ogg" type="video/ogg">
			</video> -->
		</div>
		<!-- 四个商品 -->
		<div class="main_shoe">
			<a href="javascript:;"><img src="img/fashion3.jpg" alt=""><span>大长腿神奇的中空鞋zho</span></a>
			<a href="javascript:;"><img src="img/fashion4.jpg" alt=""><span>时髦精们的穆勒鞋</span></a>
			<a href="javascript:;"><img src="img/fashion5.jpg" alt=""><span>赚足回头率的Sneaker</span></a>
			<a href="javascript:;"><img src="img/fashion6.jpg" alt="" class="last_img"><span>你的酷男孩已上线</span></a>
		</div>
		<!-- 视频 -->
		<div class="main_big_video">
			<img src="./img/video.png" alt="" class="left_img">
			<video muted controls>
				<source src="//i1.ygimg.cn/pics/shop/zhu_zhan/cyn/advertising_video_basto_2021.mp4" type="video/mp4">
				<!-- <source src="./img/bai_li.ogg" type="video/ogg"> -->
			</video>
		</div>
		<!-- 品牌潮流资讯底部 -->
		<!-- <div class="BTI_footer">
			<img src="./img/you_gou_pcfen_lei_ru_kou_.jpg" alt="">
		</div> -->
	</div>
	<div id="img8">
		<div class="img8-cont">
			<a href="javascript:;"><button class="box"></button></a>
			<a href="javascript:;"><button class="box"></button></a>
			<a href="javascript:;"><button class="box"></button></a>
			<a href="javascript:;"><button class="box"></button></a>
			<a href="javascript:;"><button class="box"></button></a>
			<a href="javascript:;"><button class="box"></button></a>
			<a href="javascript:;"><button class="box"></button></a>
			<a href="javascript:;"><button class="box"></button></a>
		</div>
	</div>

	<!-- 公共尾部 -->
	<div id="footer"></div>




	<script src="http://localhost/firstprojectyougou2/dist/lib/jquery-1.12.4.js"></script>
	<script src="http://localhost/firstprojectyougou2/dist/js/public.min.js"></script>
	<script src="http://localhost/firstprojectyougou2/dist/js/index.min.js"></script>
	<script>
		// 头部引入
		$('#header').load("http://localhost/firstprojectyougou2/dist/html/public.html #head");
		// 引入尾部
		$('#footer').load("http://localhost/firstprojectyougou2/dist/html/public.html #foot");
	</script>

</body>

</html>